<template>
	<view class="depart_box">
		<view class="block1">
			<view class="tit_box">
				<view class="tit">出发日期</view>
				<view v-for="(item,index) in datas.priceOfMonths" :class="index==1?'styled':''" v-if="index<2">
					<view class="month">{{item.month}}月</view>
					<view class="price">￥{{item.minPrice}}元起</view>
				</view>
				
			</view>
			<calendar 
			:date="startDate"
			:selected="selected" 
			:lunar="false" 
			:disable-before="false" 
			:start-date="startDate"
			:end-date="startDate"
			:data="datas.spec"
			@getdate="getdate" />
		</view>
		<view class="block2">
			<view class="tit">您选择的出发时间：<text>{{departureTime.year}}年{{departureTime.month}}月{{departureTime.date}}日</text></view>
			<view class="tit tit_s">选择数量</view>
			<view class="item dis_fx fx_between">
				<view class="info">
					<view class="item_tit">成人:￥{{dailyprice}}</view>
					<text>成人数量为奇数时，需要补单房差{{datas.roomPriceDifference}}元</text>
				</view>
				<view class="num dis_fx fx_column">
					<view class="num_btn" @click="reduceAdultNum"></view><text>{{adultNum}}</text><view class="num_btn plus" @click="addAdultNum"></view>
				</view>
			</view>
			<view class="item dis_fx fx_between">
				<view class="info">
					<view class="item_tit">儿童</view>
					<text>12周岁以下，不能超过2名儿童，若占床位需线下补差价</text>
				</view>
				<view class="num dis_fx fx_column">
					<view class="num_btn" @click="reduceChildNum"></view><text>{{childNum}}</text><view class="num_btn plus" @click="addChildNum"></view>
				</view>
			</view>
			<view class="addit dis_fx fx_column" @click="insuranceTab"><view class="dis_fx fx_column"><view class="icon" :class="insuranceSelect?'cur':''"></view><text>{{datas.insuranceName}}</text></view><view class="price">￥{{datas.insurancePrice}}</view></view>
		</view>
		<view class="confirm_btn">
			<view class="dis_fx fx_between fx_column">
				<view class="info dis_fx fx_center_column fx_center">
					<text>总价</text>
					<view class="price dis_fx fx_column"><text>￥{{price}}</text><view class="addit" v-if="singleAdult">(含单房差价￥{{datas.roomPriceDifference}})</view></view>
				</view>
				<view class="btn" @click="buyNow()">立即购买</view>
			</view>
		</view>
	</view>
</template>

<script>
	import util from '../../../common/util.js'
	import calendar from '@/components/mehaotian-calendar/mehaotian-calendar.vue';
	export default {
		components: {
			calendar
		},
		data() {
			return {
				insuranceSelect:true,
				selected:[],
				startDate:'',
				endDate:'',
				productId:'',
				datas:[],
				departureTime:'',  //出发时间
				adultNum:1, //成人数量
				childNum:0, //儿童数量
				dailyprice:0, //当天价格
				dailyPriceStockId:'', //
				singleAdult:true, //成人人数为单
				price:0,
				hasadultQty:0
			};
		},
		onLoad(option){
			// 获取产品id			
			if(option.productId){
				this.productId = option.productId
				this.getDatas();								
			}else{
				uni.showModal({
					content: '路径错误',
					showCancel: false
				});			
			}
			if(option.tripBeginDate ){
				var now=new Date(option.tripBeginDate);
				var nowstr=util.formatDate(now,"yyyy-MM-dd")
				// console.log(nowstr)
				this.startDate=nowstr
			}else{
				var now=new Date();
				var nowstr=util.formatDate(now,"yyyy-MM-dd")
				// console.log(nowstr)
				this.startDate=nowstr
			}
			if(option.hasadultQty){
				this.hasadultQty=option.hasadultQty
			}else{
				this.hasadultQty=0
			}
		},
		methods: {
			//选择保险
			insuranceTab(){
				let insuranceSelect=this.insuranceSelect;
				this.insuranceSelect=!insuranceSelect;
				this.calculationPrice();
			},
			//增加儿童数量
			addChildNum(){
				var that=this;
				let childNum=that.childNum;
				childNum+=1;
				that.childNum=childNum;
			},
			//减少儿童数量
			reduceChildNum(){
				var that=this;
				let childNum=that.childNum;
				if(childNum>0){
					childNum-=1;
				}
				that.childNum=childNum;
			},
			//增加成人数量
			addAdultNum(){
				var that=this;
				let adultNum=that.adultNum;
				adultNum+=1;
				var hasadultQty=parseInt(that.hasadultQty)
				var maxNum=that.datas.maxPeople;
				if((hasadultQty+adultNum)>maxNum){
					uni.showModal({
						content: '人数过多',
						showCancel: false
					});
					return;
				}
				that.adultNum=adultNum;
				if(adultNum%2==1){
					that.singleAdult=true;
				}else{
					that.singleAdult=false
				}
				that.calculationPrice()
			},
			//减少成人数量
			reduceAdultNum(){
				var that=this;
				let adultNum=that.adultNum;
				if(adultNum>1){
					adultNum-=1
				}
				that.adultNum=adultNum;
				if(adultNum%2==1){
					that.singleAdult=true;
				}else{
					that.singleAdult=false
				}
				that.calculationPrice()
			},
			//计算价格
			calculationPrice(){
				var that=this;
				let singleroomPrice=0;
				if(that.singleAdult){
					singleroomPrice=that.datas.roomPriceDifference;
				}
				let price=that.dailyprice*that.adultNum+singleroomPrice;
				if(that.insuranceSelect){
					price+=that.datas.insurancePrice
				}
				that.price=price
			},
			//立即购买
			buyNow () {
				// uni.navigateTo({url: '/pages/order/paySuccess/paySuccess'})
				var that=this;
				let productId=that.productId;
				let price=that.price;
				let departureTime=that.departureTime;
				let outDate=departureTime.year + "-" + departureTime.month + "-" + departureTime.date
				let nw=new Date()
				let otd=new Date(outDate)
				if(otd.getMilliseconds()<nw.getMilliseconds()){
					util.formatDate(nw,"yyyy-MM-dd")
				}
				let adultNum=that.adultNum;
				let childNum=that.childNum;
				
				let url='/pages/order/orderConfirm/orderConfirm?productId='+productId+"&price="+price+"&outDate="+outDate+"&adultNum="+adultNum+"&childNum="+childNum
				
				uni.navigateTo({url: url})
			},
			//加载数据
			getDatas(){
				uni.showLoading({
					mask:true,
					title: '加载中'
				});
				var _self = this
				util.fetchPost('/api/product/getProductConfig',{productId:_self.productId},function(res){
					_self.endDate=res.data.spec[res.data.spec.length-1].date
					_self.datas=res.data
					uni.hideLoading();
				},function(){},false)
			},
			//获取当天价格 dayprice
			getDayPrice(dateTime){
				var that = this
				that.dailyprice=dateTime.dailyPrice;
				that.dailyPriceStockId=dateTime.dailyPriceStockId;
				that.calculationPrice()
			},
			// 日历
			getdate(e) {
				// console.log(e);
				var that = this
				that.departureTime=e;
				that.getDayPrice(e)
				var dateStr = that.currentDate;
				if (!dateStr) {
					var currDate = e.year + "-" + e.month + "-" + e.date + " " + e.lunar.ncWeek;
					that.currentDate = currDate;
				}
				var month = e.year + "-" + e.month;
				that.month = month;
				var dateStrKey = e.year;
				if (e.month * 1 < 10) {
					dateStrKey += "-" + "0" + e.month;
				} else {
					dateStrKey += "-" + e.month;
				}
				if (e.date * 1 < 10) {
					dateStrKey += "-" + "0" + e.date;
				} else {
					dateStrKey += "-" + e.date;
				}
				var signList = that.dataList;
				if (!!dateStrKey && signList) {
					for (var index in signList) {
						var _data = signList[index];
						if (dateStrKey == _data.signDateStr) {
							that.signData = {
								orgName: _data.departmentName,
								signDate: _data.signDate,
								address: _data.address
							};
							that.signMark = true;
							break;
						} else {
							that.signMark = false;
							that.signData = {};
						}
					}
				} else {
					that.signMark = false;
					that.signData = {};
				}
			}
		}
	}
</script>

<style>
	.styled{
		position: fixed;
		margin-left: 20%;
		margin-top: -63px;
	}
	.depart_box{
		padding: 60upx 24upx 160upx;
	}
	.depart_box .block1{
		margin-bottom: 50upx;
	}
	.depart_box .block1 .tit_box{
		width: 150upx;
		text-align: center;
	}
	.depart_box .block1 .tit{
		font-size: 28upx;
		color: #707070;
	}
	.depart_box .block1 .month{
		font-size: 40upx;
		color: #333;
		font-weight: 600;
		margin-top: 20upx;
	}
	.depart_box .block1 .price{
		font-size: 24upx;
		color: #333;
	}
	.depart_box .block2{
		box-shadow: 0 0 18px 0 rgba(106, 79, 13, 0.12);
		border-radius: 10upx;
		padding: 30upx 26upx 40upx;
	}
	.depart_box .block2 .tit{
		font-size: 32upx;
		color: #333333;
	}
	.depart_box .block2 .tit text{
		font-size: 28upx;
		color: #757575;
		display: inline-block;
		margin-left: 10upx;
	}
	.depart_box .block2 .tit.tit_s{
		margin: 40upx 0 20upx;
	}
	.depart_box .block2 .item{
		margin-bottom: 50upx;
	}
	.depart_box .block2 .item .info{
		width: 450upx;
	}
	.depart_box .block2 .item .item_tit{
		font-size: 28upx;
		color: #757575;
	}
	.depart_box .block2 .item .info text{
		font-size: 24upx;
		color: #FC5C1D;
	}
	.depart_box .block2 .item .num{
		align-items: flex-start;
	}
	.depart_box .block2 .item .num_btn{
		background: url() no-repeat center/contain;
		width: 50upx;
		height: 50upx;
	}
	.depart_box .block2 .item .num_btn.plus{
		background-image: url();
	}
	.depart_box .block2 .item .num text{
		font-size: 36upx;
		color: #333;
		margin: 0 40upx;
	}
	.depart_box .block2 .addit .icon{
		width: 36upx;
		height: 36upx;
		border-radius: 10upx;
		background: #c0c0c0;
	}
	.depart_box .block2 .addit .icon.cur{
		background: #FFC800 url() no-repeat center/cover;
	}
	.depart_box .block2 .addit text{
		font-size: 28upx;
		color: #757575;
		margin-left: 20upx;
	}
	.depart_box .block2 .addit .price{
		font-size: 28upx;
		color: #FC5C1D;
		margin-left: 200upx;
	}
	.confirm_btn{
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 100upx;
		background: #FFC800;
		padding: 0 24upx;
	}
	.confirm_btn .info{
		height: 100upx;
		color: #fff;
	}
	.confirm_btn .info>text,.confirm_btn .info .price .addit{
		font-size: 24upx;
	}
	.confirm_btn .info .price text{
		font-size: 48upx;
		margin-right: 10upx;
	}
	.confirm_btn .btn{
		font-size: 36upx;
		color: #333;
		margin-right: 50upx;
	}
</style>
